import Vue from 'vue'
import Router from 'vue-router'
//import Router from 'vue-router' 的核心作用是：从 node_modules 目录中导入 vue-router 这个包，
//并将其主要的类（或函数）命名为 Router 在当前文件中使用。
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
import Xunhuan from '@/components/Xunhuan'
import compu  from '@/components/Computed'
import Watch from '@/components/WatchDemo'
import bind  from '@/components/BindDemo'
import eventDemo from '@/components/EventDemo'
import form from '@/components/FormDemo'
import axiosDemo from '@/components/AxiosDemo'
import zujian from '@/components/Zujian'
import DiyEvent from '@/components/DiyEvent'
/*
引入的文件需要注意下  不是 @/src/components/Computed 这个路径  需要去掉src的目录
*/

/****
Vue.use() 是 Vue.js 提供的一个静态方法，专门用来安装 Vue 插件 (Plugin)。
Vue.use(Router) 的作用就是将 vue-router 这个插件集成到你的 Vue 应用中。
从而让整个应用都具备路由功能。
如果不执行这一步，你的应用将无法识别 <router-link> 和 <router-view> 这两个关键的路由组件，
也无法在任何组件中通过 this.$router 或 this.$route 来访问路由实例
**/

Vue.use(Router)


/****
创建一个新的 Vue Router 实例，配置好应用的所有路由规则，然后将这个实例作为模块的默认导出，
以便在 main.js 中导入并注入到 Vue 应用中。
可以把它理解为 Vue 应用的 “导航地图”。
a. new Router({ ... })
Router: 这是从 vue-router 包中导入的路由类 (Class)。
new Router(): 使用 new 关键字创建 Router 类的一个实例 (Instance)。
{ ... }: 传递给 Router 构造函数的是一个配置对象，它定义了路由实例的行为和规则。
b. routes: [ ... ]
作用：这是路由配置对象中最核心的属性，它是一个数组，包含了应用中所有的路由规则 (Route Records)。
值：一个对象数组，数组中的每个对象都代表一条路由规则。
c. 路由规则对象 { path, name, component }
数组中的每个对象都定义了 URL 路径与 Vue 组件之间的映射关系。

整个的使用过程
1. 导入 Vue 和 Router
2. 导入你需要的组件
import HelloWorld from '@/components/HelloWorld'
3. 安装路由插件
Vue.use(Router);
4. 创建并导出路由实例
export default new Router(
5. 定义路由规则数组
  routes: [

在main.js中
import router from './router'; // 1. 从 './router' 导入路由实例
new Vue({
  router, // 2. 将路由实例注入根 Vue 实例

***/
export default new Router({
  routes: [
      {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    } , {
      path: '/Hello',
      name: 'Hello',
      component: Hello
    }  , {
      path: '/Xunhuan',
      name: 'Xunhuan',
      component: Xunhuan
    }, {
      path: '/jisuan',
      name: 'Computed',
      component: compu
    }, {
      path: '/watch',
      name: 'Watch',
      component: Watch
    },{
      path: '/bind',
      name: 'bind',
      component: bind
    },{
      path: '/eventDemo',
      name: 'eventDemo',
      component: eventDemo
    },{
      path: '/form',
      name: 'form',
      component: form
    },{
      path: '/axiosDemo',
      name: 'axiosDemo',
      component: axiosDemo
    } ,{
      path: '/zujian',
      name: 'zujian',
      component: zujian
    },{
      path: '/diy',
      name: 'DiyEvent',
      component: DiyEvent
    },
  ]
})


/***
{
      path: '/jisuan',
      name: 'Computed',
      component: Computed
    } 中 name 指的是什么
在 Vue Router 的路由配置中，name 指的是路由记录的名称。
简单来说，它就是你给这个路由起的一个唯一的 “别名”，方便你在代码中引用它，而不用写完整的 URL 路径。
主要作用
用于编程式导航这是 name 最主要的用途。当你需要通过代码跳转页面时，使用 name 比使用 path 更灵活、更可靠。
使用 name 跳转（推荐）：
// 不带参数
this.$router.push({ name: 'Computed' })

// 带参数 (参数会自动添加到 URL)
this.$router.push({ name: 'User', params: { id: 123 } })
// 假设路由定义是 { path: '/user/:id', name: 'User', ... }
// 跳转后 URL 会是 /user/123
使用 path 跳转：
// 不带参数
this.$router.push('/jisuan')

// 带参数 (必须手动拼接 URL)
this.$router.push(`/user/${123}`)
使用 name 的好处是，如果你将来修改了 path（比如从 /jisuan 改成 /calculator），
你不需要修改所有使用 name: 'Computed' 进行跳转的代码。
但如果你用了 path: '/jisuan'，就必须全部修改。
在 <router-link> 中使用你也可以在模板的 <router-link> 组件中使用 :to 配合 name 进行跳转。
<router-link :to="{ name: 'Computed' }">
  去计算页面
</router-link>
用于嵌套路由和命名视图在复杂的路由场景中，name 是识别和匹配子路由或特定视图的关键。
总结
属性	作用
path	URL 的路径，决定了浏览器地址栏显示什么。
name	路由的唯一标识符，方便在代码中引用和跳转。
所以，在你的例子 { path: '/jisuan', name: 'Computed', ... } 中：
用户在浏览器输入 yourdomain.com/jisuan 会访问到这个页面。
你在代码里可以通过 this.$router.push({ name: 'Computed' }) 来跳转到这个页面。
***/
